<template>
  <div id="commodityList">
    <router-link to="">
      <ul v-for="(item, index) in list" :class="NavClass" :key="index">
        <li>
          <img :src="item.img" alt="" srcset="">
        </li>
        <li>{{item.title}}</li>
      </ul>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'commodity',
  props: ['list', 'NavClass']
}
</script>

<style scoped lang="less">
#commodityList {
  a {
    color: rgb(1, 1, 1);
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 20%;
      padding: 5px 0;
      li {
        text-align: center;
        font-size: 24px; /*px*/
        padding: 5px 0;
        img {
          width: 90px;
        }
      }
    }
  }
}
.NavClass {
  img {
    border-radius: 50%;
  }
}
</style>
